<template>
    <view class="wrap">
        <view class="tbg">
            <image src="../../static/images/icon-me-tbg.png"></image>
        </view>
        <view class="tEdit">
            <image src="../../static/images/icon-home-edit.png" mode="" @click="onSkipTap('editStore')"></image>
        </view>
        <view class="store" v-if="!gShopInfo.id">
            <view class="store-img">
                <image src="../../static/images/icon-home-user.png" mode="aspectFill"></image>
            </view>
            <view class="store-info" @click="onSkipTap('login')">
                <view class="store-name">未登录</view>
                <view class="store-desc">点击立即登录</view>
            </view>
            <view class="storeBtn-apply" @click="onSkipTap('openNewStore')">申请入驻</view>
        </view>
        <view class="store hasLogin" v-else>
            <view class="store-img">
                <image :src="gShopInfo.logoImg" mode="aspectFill"></image>
            </view>
            <view class="store-info">
                <view class="store-name">{{gShopInfo.name}}</view>
                <view class="store-desc">
                    <view class="store-star">
                        <image src="../../static/images/icon-level4.png"></image>
                        <image src="../../static/images/icon-level3.png"></image>
                        <image src="../../static/images/icon-level2.png"></image>
                        <image src="../../static/images/icon-level1.png"></image>
                    </view>
                    <view class="store-fans">{{gShopInfo.concernCount}}粉丝</view>
                </view>
                <view class="store-vip">
                    <image src="../../static/images/icon-zuanshi-tag.png" mode=""></image>
                </view>
            </view>
            <view class="storeBtn-prew" @click="onSkipTap('storeIndex')">
                <image src="../../static/images/icon-home-eye.png"></image>
                <text>预览店铺</text>
            </view>
        </view>
        <view class="cell">
            <view class="cell-item" v-for="(item, index) in navList" :key="index" @click="onSkipTap(item.type)">
                <view class="cell-item_L">
                    <view class="cell-item_icon">
                        <image :src="item.icon" :style="{width: `${item.width}rpx`, height: `${item.height}rpx`}">
                        </image>
                    </view>
                    <view>{{item.title}}</view>
                </view>
                <view class="cell-item_R app_arrow">{{item.rTitle}}</view>
            </view>
            <view class="cell-item" @click="clearCache">
                <view class="cell-item_L">
                    <view class="cell-item_icon">
                        <image src="../../static/images/icon-me-n7.png" :style="{width: `32rpx`, height: `40rpx`}">
                        </image>
                    </view>
                    <view>清除缓存</view>
                </view>
                <view class="cell-item_R app_arrow" v-if="showCacheSize">{{cacheSize}}</view>
                <view class="cell-item_R app_arrow" v-else> </view>
            </view>
        </view>
        <view v-if="gUserInfo.userId" class="logout bw app_flex-aicjcc" @click="logout">退出登录</view>
        <u-popup v-model="showKF" mode="bottom">
            <view class="kfPop">
                <view class="kfPop-header h100 app_flex-aicjcsb">
                    <view class="kfPop-header_title">联系平台</view>
                    <icon type="clear" color="#ccc" size="19" @click="showKF = false"></icon>
                </view>
                <view class="kfPop-item app_flex-aic">
                    <view class="kfPop-item_icon">
                        <image src="../../static/images/icon-me-phone.png" mode=""></image>
                    </view>
                    <view class="kfPop-item_title">客服电话</view>
                    <view class="kfPop-item_phone app_flex1">{{contact.telePhone}}</view>
                    <view class="kfPop-btn app_flex-aicjcc" @click="makePhoneCall">拨号</view>
                </view>
                <view class="kfPop-item app_flex-aic">
                    <view class="kfPop-item_icon">
                        <image src="../../static/images/icon-me-wx.png" mode=""></image>
                    </view>
                    <view class="kfPop-item_title">客服微信</view>
                    <view class="kfPop-item_phone app_flex1">{{contact.weChat}}</view>
                    <view class="kfPop-btn app_flex-aicjcc" @click="onCopyTap">复制</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                showCacheSize: false,
                cacheSize: '0B',
                navList: [{
                        type: 'vip',
                        title: '会员中心',
                        rTitle: '',
                        icon: '../../static/images/icon-me-n1.png',
                        width: 40,
                        height: 36
                    }, {
                        type: 'wallet',
                        title: '我的账户',
                        rTitle: '',
                        icon: '../../static/images/icon-me-n2.png',
                        width: 41,
                        height: 38
                    }, {
                        type: 'safety',
                        title: '安全管理',
                        rTitle: '',
                        icon: '../../static/images/icon-me-n3.png',
                        width: 36,
                        height: 41
                    }, {
                        type: 'kefu',
                        title: '联系平台',
                        rTitle: '',
                        icon: '../../static/images/icon-me-n4.png',
                        width: 40,
                        height: 40
                    }, {
                        type: 'feedback',
                        title: '意见反馈',
                        rTitle: '',
                        icon: '../../static/images/icon-me-n5.png',
                        width: 40,
                        height: 40
                    }, {
                        type: 'aboutMe',
                        title: '关于我们',
                        rTitle: '',
                        icon: '../../static/images/icon-me-n6.png',
                        width: 40,
                        height: 40
                    },
                    //             {
                    // 	type: 'cache',
                    // 	title: '清除缓存',
                    // 	rTitle: '',
                    // 	icon: '../../static/images/icon-me-n7.png',
                    // 	width: 32,
                    // 	height: 40
                    // },
                ],
                showKF: false,
                contact: {},
            }
        },
        onLoad(options) {
            this.updatePage()
        },
        onShow() {
            // this.$g_util.calculateCacheSize().then(size => {
            // 	this.cacheSize = size
            // 	let key = this.navList.findIndex(item => item.type == 'cache')
            // 	this.navList[key].rTitle = size
            // })
            // #ifdef APP-PLUS
            this.calculateCacheSize()
            // #endif
        },
        onPullDownRefresh() {
            this.updatePage()
        },
        methods: {
            updatePage() {
                this.getUserInfo()
                this.getContact()
            },
            onSkipTap(type, index) {
                console.log(type);
                let urlObj = {
                    login: '/pages/login/index',
                    openNewStore: '/pages/apply/openNewStore?pageType=add',
                    editStore: '/pages/apply/openNewStore?pageType=edit',
                    storeIndex: '/pages/shopInfo/storeIndex',
                    vip: '/pages/vip/center',
                    wallet: '/pages/wallet/wallet',
                    safety: '/pages/me/safety',
                    feedback: '/pages/me/feedback',
                    aboutMe: '/pages/me/aboutMe',
                    kefu: () => {
                        this.showKF = true
                    },
                    cache: () => {
                        this.clearCache()
                    }
                }
                this.$g_util.navigationTo(urlObj, type)
            },
            calculateCacheSize() {
                plus.cache.calculate((size) => {
                    let sizeCache = parseInt(size)
                    this.showCacheSize = true
                    
                    if (sizeCache == 0) {
                        this.showCacheSize = false
                        this.cacheSize = '0B'
                    } else if (sizeCache < 1024) {
                        this.cacheSize = `${sizeCache}B`
                    } else if (sizeCache < 1048576) {
                        this.cacheSize = `${(sizeCache/1024).toFixed(2)}KB`
                    } else if (sizeCache < 1073741824) {
                        this.cacheSize = `${(sizeCache/1048576).toFixed(2)}MB`
                    } else {
                        this.cacheSize = `${sizeCache/1073741824}GB`
                    }
                })
            },
            clearCache() {
                uni.showModal({
                    title: '提示',
                    content: '是否清空缓存？',
                    success: res => {
                        if (res.confirm) {
                            plus.cache.clear(() => {
                                uni.showToast({
                                    title: '缓存已清空'
                                })
                                this.calculateCacheSize()
                            })
                        }
                    }
                })
            },
            getUserInfo() {
                this.$store.dispatch('updateUserInfo').then(() => {
                    uni.stopPullDownRefresh()
                })
            },
            getContact() {
                this.$g_api.independentAboutGetContact().then(({
                    data
                }) => {
                    this.contact = data
                })
            },
            makePhoneCall() {
                if (this.contact?.telePhone) {
                    uni.makePhoneCall({
                        phoneNumber: String(this.contact.telePhone),
                        complete(res) {
                            console.log(res);
                        }
                    })
                }
            },
            onCopyTap() {
                if (this.contact?.weChat) {
                    uni.setClipboardData({
                        data: this.contact.weChat,
                        success: () => {
                            uni.showToast({
                                title: '已复制',
                                icon: 'none'
                            })
                        }
                    })
                }
            },
            logout() {
                uni.showModal({
                    title: '提示',
                    content: '确认要退出登录?',
                    success: res => {
                        if (res.confirm) {
                            this.$g_util.logout()
                        }
                    }
                })
            }
        },
    }
</script>

<style scoped lang="scss">
    .tbg {
        position: absolute;
        top: 0;
        left: 0;
        width: 750rpx;
        // z-index: -1;

        image {
            width: 750rpx;
            height: 320rpx;
        }
    }

    .tEdit {
        position: absolute;
        top: 80rpx;
        right: 30rpx;
        z-index: 999;

        image {
            width: 40rpx;
            height: 40rpx;
        }
    }

    .store {
        position: relative;
        z-index: 99;
        display: flex;
        align-items: center;
        margin: 158rpx 20rpx 30rpx;
        padding: 45rpx 20rpx 45rpx 30rpx;
        border-radius: 10rpx;
        background-color: #fff;

        &.hasLogin {
            padding: 32rpx 20rpx 30rpx 30rpx;
        }
    }

    .store-img {
        width: 110rpx;
        font-size: 0;
        flex-shrink: 0;
        margin-right: 30rpx;

        image {
            width: 110rpx;
            height: 110rpx;
            border-radius: 10rpx;
        }
    }

    .store-info {
        flex: 1;
        transform: translateY(10rpx);
    }

    .store-name {
        font-weight: bold;
        font-size: 36rpx;
        color: #333;
        margin-bottom: 8rpx;
    }

    .store-desc {
        display: flex;
        align-items: center;
        font-size: 26rpx;
        color: #999;
    }

    .store-star {
        display: flex;
        align-items: center;
        font-size: 0;

        image {
            width: 24rpx;
            height: 20rpx;
            margin-right: 4rpx;
        }
    }

    .store-fans {
        margin-left: 18rpx;
        font-size: 22rpx;
        color: #999;
    }

    .store-vip {
        margin-top: 10rpx;

        image {
            height: 36rpx;
            width: 112rpx;
        }
    }

    .storeBtn-apply {
        flex-shrink: 0;
        width: 170rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        font-size: 24rpx;
        color: #fff;
        border-radius: 10rpx;
        background-color: #4C88FF;
    }

    .storeBtn-prew {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0;
        width: 170rpx;
        height: 60rpx;
        background: #F2F2F2;
        border-radius: 10rpx;

        image {
            width: 36rpx;
            height: 26rpx;
        }

        text {
            margin-left: 10rpx;
            font-size: 24rpx;
            color: #333333;
        }
    }

    .cell {
        margin: 0 20rpx;
        padding: 0 30rpx;
        border-radius: 10rpx;
        overflow: hidden;
        background-color: #fff;
    }

    .cell-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100rpx;
        border-bottom: 1px solid #f2f2f2;

        &:last-child {
            border-bottom: 0;
        }
    }

    .cell-item_L {
        display: flex;
        align-items: center;

        &:nth-child(1) {
            image {
                width: 40rpx;
                height: 36rpx;
            }
        }
    }

    .cell-item_icon {
        width: 40rpx;
        margin-right: 26rpx;
        display: flex;
        justify-content: center;
    }

    .cell-item_R {
        &::after {
            border-color: #999;
            width: 14rpx;
            height: 14rpx;
            right: 12rpx;
        }
    }

    .kfPop-header {
        padding: 0 30rpx;
        margin-bottom: 60rpx;
    }

    .kfPop-header_title {
        font-size: 32rpx;
        font-weight: bold;
    }

    .kfPop-item {
        margin-bottom: 80rpx;
        padding: 0 30rpx;
    }

    .kfPop-item_icon {
        font-size: 0;

        image {
            width: 50rpx;
            height: 50rpx;
        }
    }

    .kfPop-item_title {
        margin-left: 30rpx;
        width: 160rpx;
    }

    .kfPop-item_phone {}

    .kfPop-btn {
        width: 110rpx;
        height: 60rpx;
        border-radius: 30rpx;
        box-sizing: border-box;
        border: 1px solid $g-border-color;
    }

    .logout {
        margin: 20rpx auto 36rpx;
        width: 500rpx;
        height: 90rpx;
        border-radius: 10rpx;
        font-size: 30rpx;
        color: #ff4c4c;
    }
</style>